import React from 'react';
import {connect} from 'dva';
import styles from './index.less';
import { Picker, InputItem } from 'antd-mobile';
/**
 * 出差目的
 */
class cPurposeOfTripAndRemark extends React.Component {
  constructor(props) {
    super(props);

    this.state = {

    }
  }

  handleListLabel = (list) => {
    return global._.map(list, item => {
      return {
        label: item,
        value: item
      }
    });
  }

  onChange = (value, key) => {
    this.props.dispatch({type: 'detail/changeMast', payload: {
      [key]: value
    }});
  }

  render(){
    return (
      <div className={styles.baseList}>
        <Picker data={this.handleListLabel(this.props.detail.allTravelTypes)} cols={1} onChange={(values) => this.onChange(values[0], 'type')}>
          <div className={styles.item}>
            <div className={styles.des}>Type</div>
            <div className={styles.value}>{this.props.detail.mast.type}</div>
          </div>
        </Picker>
        {
          this.props.detail.mast.type !== 'Others'
          ?
          <Picker data={this.handleListLabel(this.props.detail.allTravelTypes)} cols={1} onChange={(values) => this.onChange(values[0], 'type')}>
            <div className={styles.item}>
              <div className={styles.des}>Visit Site</div>
              <div className={styles.value}>Wh</div>
            </div>
          </Picker>

          :
          null
        }
        {/*
          <div className={styles.item}>
          <div className={styles.des}>Note</div>
          <div className={styles.value}>
          <InputItem
          clear
          placeholder="click input"
          value={this.props.detail.mast.requestorRemarks}
          onChange={(value) => this.onChange(value, 'requestorRemarks')}
          ></InputItem>
          </div>
          </div>
          */}
      </div>
    )
  }
}


function mapStateToProps(state) {
  return {
    ...state.detail
  }
}
export default connect(mapStateToProps)(cPurposeOfTripAndRemark);
